React NavigationのNavigators
こんな漢字でまとめたい
Navigatorsとは何を指しているか
Navigatorsにはどんな種類があるか
Navigatorsの使用時のComponentの構造
Nesting Navigators
この辺、複雑すぎて、触っていない期間が少しあるとすぐ忘れてしまうmrsekut.icon
概要だけをまとめて別ページに切り出しても良いかも
こういう感じ、たぶん
Componentの構造は全てのNavigatorsで共通
親として、Navigator
子として、Sceen
code:ts
const Hoge = createHogekNavigator();
const A = () => {
return (
<Hoge.Navigator>
<Hoge.Screen
name=".."
component={..}
options={..}
/>
<Hoge.Screen
..
/>
..
</Hoge.Navigator>
)
}
この、「親」に当たるものをNavigatorとよんでいる
複数種類ある
例えば、bottom tab、Stackなど
子のScreenは、概念としては共通
ただし、共通のComponentを使っているわけではない
親のNavigatorが提供するScreenを提供する
HogeというNavigatorがあったとき、
createHogeNavigator()が、親子のComponentを提供する
意味ないが、表にするとこんな感じ
table:_
親 子
Bottom TabのNavigator Bottom TabのScreen
StackのNavigator StackのScreen
... ...
options
ので、各docsのpropsとかは基本的に親の話をしている
name, component, optionsぐらいしかない、という感じか？
initialParamsとかもある
子のScreen全てに対して共通のoptionを指定したい時
NavigatorのscreenOptionsに指定すると一括になる
でもこれ、無視して、useNavigation使っても良くない？という気もする
差がないなら
Nesting navigators
Navigatorの入れ子
各Navigatorは自分自身のhistoryしか保持しない
どのbottom tabからでも共通で同じstackを使いたいときとか？
Each screen in a navigator has its own params #?? 何のことを言っているのかいまいちわからん
Rendering initial route defined in the navigator #?? これもわからん
できるだけNestを減らしたほうがいい
どんどん複雑になる
パフォーマンス的にも良くない
navigateで移動する操作が複雑になる
通常のページ遷移
webと異なりページ遷移するごとに、上にlayerを重ねていくことになる
https://gyazo.com/690c6288f31daaeb6e833b7c523b9b6d
このページのpropsは全てNavigatorの話
iosは左から、Androidは下から表示されるが、設定で変えられる
何のために必要？
docsはどれ？
Bottom Tabs
Bottomのタブを作る
createBottomTabNavigator
createBottomTabNavigator
Screen?
Drawer
サイドバーみたいなやつ
Twitterアプリで左からメニューが表示されるやつに近い
https://gyazo.com/32ba52138af5f1f94430cf6cc5472328
Material Bottom Tabs
Material Top Tabs
ページ上部のタブ
Custom Navigator
useNavigationBuilderhooksを使う
他のNavigatorを統合する
よくわからんmrsekut.icon
3行ぐらいでコレまとめておいてほしいmrsekut.icon
忘れるmrsekut.icon
できれば図示してほしい